/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/* eslint-disable no-useless-escape */
/* eslint-disable no-restricted-globals */
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { Form, Modal, Row, InputNumber, Divider, Radio } from 'antd';
import { connect } from 'dva';

const FormItem = Form.Item;

const RadioGroup = Radio.Group;
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};

const DispatSettingModal = props => {
  const { visible, onCancel, title, confirmLoading, form, deliveryPaySetInfo, dispatch } = props;
  const { getFieldDecorator, validateFields } = form;
  const { brandInfo = [], deliveryPayType } = deliveryPaySetInfo;

  const limitDecimals = value => {
    const reg = /^(\-)*(\d+)\.(\d\d).*$/;
    if (typeof value === 'string') {
      return !isNaN(Number(value)) ? value.replace(reg, '$1$2.$3') : '';
    }
    if (typeof value === 'number') {
      return !isNaN(value) ? String(value).replace(reg, '$1$2.$3') : '';
    }
    return '';
  };

  const onOk = () => {
    validateFields((error, values) => {
      if (error) return;
      const { deliveryPayType: deliveryPayTypes, ...rest } = values;
      const formatList = Object.keys(rest).map(item => ({ brand: item, price: rest[item] }));
      dispatch({
        type: 'dispatStatistics/setDeliveryPaySetInfo',
        payload: {
          deliveryPayType: deliveryPayTypes,
          list: formatList,
        },
      }).then(onCancel);
    });
  };

  return (
    <Modal
      title={title}
      visible={visible}
      onOk={onOk}
      onCancel={onCancel}
      confirmLoading={confirmLoading}
      centered
      destroyOnClose
    >
      <Form {...formItemLayout}>
        {brandInfo.map(item => (
          <FormItem label={item.brand_name || ''} key={item.brand} style={{ marginBottom: 12 }}>
            {getFieldDecorator(`${item.brand}`, {
              rules: [
                {
                  pattern: /^(([0-9][0-9]?(\.\d{1,2})?)|10|10.0)$/,
                  message: '请输入正确的格式，最多保留两位小数！',
                },
              ],
              initialValue: item.price,
            })(
              <InputNumber
                min={0}
                step={0.01}
                formatter={limitDecimals}
                parser={limitDecimals}
                style={{ width: 100 }}
                placeholder="请输入价格"
              />,
            )}
            <span style={{ marginLeft: 10 }}>元/每单</span>
          </FormItem>
        ))}
        <Row>派费结算已当天派件扫描量为准</Row>
        <Divider />
        <FormItem label="发放设置">
          {getFieldDecorator('deliveryPayType', {
            initialValue: deliveryPayType,
          })(
            <RadioGroup name="deliveryPayType">
              <Radio value="2">自动发放</Radio>
              <Radio value="1">手动发放</Radio>
            </RadioGroup>,
          )}
        </FormItem>
        <Row>选择自动发放，则每天凌晨自动从平台消费账号扣除对应的派费至快递员APP可提现账户</Row>
      </Form>
    </Modal>
  );
};

export default connect(({ loading }) => ({
  confirmLoading: loading.effects['dispatStatistics/setDeliveryPaySetInfo'],
}))(React.memo(Form.create()(DispatSettingModal)));
